<template>
  <div class="setting">
    <div class="flex-c" style="width: 100%;height: 37px; background-color: #FFFFFF;  ">
      <div class="" style="margin-right: 81px;">
        <div class="" @click="select(0)" :class="activeselect==0 ? 'activeclass' : 'noactiveclass'"
          style="padding-bottom: 10px;font-weight: bold;font-size: 13px;font-family: auto">
          设备状态
        </div>
        <div class="" style="border-radius: 1px;width: 52px;height: 2px;margin: auto;"
          :style="activeselect==0 ? 'background: #0580FF;' : ''">
        </div>
      </div>
      <div class="">
        <div class="" style="padding-bottom: 10px;font-weight: bold;font-size: 13px;font-family: auto"
          @click="select(1)" :class="activeselect==1 ? 'activeclass' : 'noactiveclass'">
          工单管理
        </div>
        <div class="" style="border-radius: 1px;width: 52px;height: 2px;margin: auto;"
          :style="activeselect==1 ? 'background: #0580FF;' : ''">
        </div>
      </div>
    </div>
    <!-- 设备状态内容区域 -->
    <div class="" v-if="activeselect==0">
      <div class="" style="margin:0px  15px" v-if="activeselect==0">
        <div class="bg-f" style="padding: 15px 16px 15px 15px;margin: 15px 0px;">
          <form @submit="tabtoplist">
            <!-- search 事件在点击键盘上的搜索/回车按钮后触发，cancel 事件在点击搜索框右侧取消按钮时触发（自己改为了搜索）。 -->
            <van-search style="color: #0580FF;" v-model="text" show-action placeholder="请输入设备名称" @search="tabtoplist">
              <template #action>
                <div @click="tabtoplist">搜索</div>
              </template>
            </van-search>
          </form>
          <div class="flex-space bg-f tab">
            <div class="" v-for="(item,index) in tablist" :key="index" v-model="active" @click="sbActive(item,index)"
              :class="active==index ? 'activeselect' : 'activeno'" style="font-size: 15px;font-weight: bold;
								font-family: auto;margin-right: 10px;line-height: 37px;">
              {{item.name}}
            </div>
          </div>
        </div>
      </div>
      <!-- 设备的内容区域 -->
      <div class="" :style="`margin-bottom: 59px;width: 100%;height:${height-248.47}px; overflow-y: scroll;`">
        <div class="" style="margin: 15px 15px 19px;">
          <van-pull-refresh v-model="sbpullLoading" @refresh="onRefresh">
            <van-list v-model="sbloading" :finished="sbfinished" :immediate-check="false" :offset="20"
              finished-text="没有更多了" @load="onLoad">
              <div class="" v-if="sbTerminalStatuslist">
                <div class="" v-for="(item,index) in sbTerminalStatuslist" :key="index">
                  <div class="bg-f" style="padding: 15px 15px 19px;margin-top: 15px;">
                    <div class="flex-space" style="margin-bottom: 15px;">
                      <div class="flex flex-align">
                        <div class="" style="width: 25px;height: 25px;margin-right: 10px;">
                          <img :src="item.imgUrl">
                        </div>
                        <div class=""
                          style="margin-right: 6px;color: #000000;font-weight: bold;font-size: 16px;font-family:auto">
                          {{item.terminalId}}
                        </div>
                        <div class="" style="width: 20px;height: 16px;">
                          <img :src="item.netWorkImgUrl">
                        </div>
                      </div>
                      <div class="flex-align" style=" height: 22px;padding: 6px; background: linear-gradient(-37deg, #3497FD, #0580FF);
							 				box-shadow: 0px 2px 5px 0px rgba(5, 128, 255, 0.52);
							 				border-radius: 11px;">
                        <div class="flex-align" style="width: 6px;height: 12px;margin-right: 4px;">
                          <img src="../../assets/newsetting/binding@2x.png">
                        </div>
                        <div class="" @click="sbBindingOperations(item)"
                          style="color: #FFFFFF;font-weight: bold;font-size: 11px;font-family:auto">
                          绑定运维
                        </div>
                      </div>
                    </div>
                    <!-- 分割线 -->
                    <div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;">
                    </div>
                    <div class="flex-space" style="padding:15px 0px ;">
                      <div class="" style="font-weight: 500;font-size: 14px;font-family: auto;color: #666666;">
                        设备昵称:
                      </div>
                      <div class="" style="font-weight: bold;font-size: 14px;font-family: auto;color: #000000;">
                        {{item.terminalName}}
                      </div>
                    </div>
                    <div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;">
                    </div>
                    <div class="flex-space" style="padding:15px 0px ;">
                      <div class="" style="font-weight: 500;font-size: 14px;font-family: auto;color: #666666;">
                        文档打印机状态:
                      </div>
                      <div class="" :style="item.printState==3?'color: #15C78B;':'color: #FA3131;'"
                        style="font-weight: bold;font-size: 14px;font-family: auto;color: #FA3131;">
                        {{item.netStateText}}
                      </div>
                    </div>
                    <div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;">
                    </div>
                    <div class="flex-space" style="padding:15px 0px ;">
                      <div class="" style="font-weight: 500;font-size: 14px;font-family: auto;color: #666666;">
                        报错时间:
                      </div>
                      <div class="" style="font-weight: bold;font-size: 14px;font-family: auto;color: #FA3131;"
                        ref="errortime">
                        {{item.errorTime}}
                      </div>
                    </div>
                    <div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;">
                    </div>
                    <div class="flex-space" style="padding:15px 0px ;">
                      <div class="" style="font-weight: 500;font-size: 14px;font-family: auto;color: #666666;">
                        故障时长:
                      </div>
                      <div class="" style="font-weight: bold;font-size: 14px;font-family: auto;color: #FA3131;"
                        ref="spans">
                        {{computetime(index)}}
                      </div>
                    </div>
                    <div class="flex-space" style="width: 100%;height: 1px;background: #F6F7FB;">
                    </div>
                    <div class="flex-space flex-align" style="padding: 19px 0px 0px;">
                      <div class="flex-align">
                        <!-- 折叠收起 -->
                        <div class="flex-align" style="width: 13px;height: 13px;margin-right:6px;" @click="sbhcout">
                          <img src="../../assets/newsetting/drop-down@2x.png" v-if="sbhcoutboole">
                          <img src="../../assets/newsetting/drop-down2@2x.png" v-else>
                        </div>
                        <div class="" style="font-weight: 500;font-size: 13px;font-family: auto;color: #0580FF;
							 		 ">
                          耗材余量
                        </div>
                      </div>
                      <div class="flex-space">
                        <div class="" style="padding:  4px 7px 5px 7px ;background: #EBF7FF;border-radius: 5px;font-weight: 500;font-size: 12px;
							 		font-family: auto;color: #0580FF;margin-right: 10px;" v-for="(item3,index3) in update" :key="index3"
                          @click="updataselect(item,item3.id)">
                          {{item3.name}}
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- 折叠区域 -->
                  <div class="bg-f flex-space" style="margin-top: 5px;padding: 15px;"
                    v-if="sbhcoutboole&&item.stocksList">
                    <div class="" v-for="(item2,index2) in item.stocksList" :key="index2">
                      <div class="">
                        <div class=""
                          style="font-weight: bold;width: 50px;color: #0580FF;font-size: 18px;font-family:auto;margin-bottom: 7px; text-align: center;"
                          :style="`color:${item2.color}`">
                          {{item2.totalQty}}
                        </div>
                        <div class="" style="font-weight: 500;color: #666666;font-size: 12px;font-family:auto;">
                          {{item2.goodsName}}余量
                        </div>
                      </div>

                    </div>
                  </div>
                </div>
              </div>
              <div class="flex-c" style="width: 100%;text-align: center;">
                <img v-if="sbTerminalStatuslist.length==0&&sbTerminalStatusbolen" src="../../assets/noList/nolist.png"
                  style=" width: 50%;">
              </div>
            </van-list>
          </van-pull-refresh>
        </div>
      </div>
    </div>
    <!-- 工单管理 -->
    <div class="" v-if="activeselect==1">
      <div class="bg-f" style="padding: 15px 16px 15px 15px;margin: 15px 15px;">
        <div class="flex-space bg-f tab">
          <div class="" v-for="(item,index) in gdList" :key="index" @click="gdActive(index, item)"
            :class="gdactive==index ? 'activeselect' : 'activeno'" style="font-size: 15px;font-weight: bold;
		 			font-family: auto;margin-right: 10px;line-height: 37px;">
            {{item.name}}
          </div>
        </div>
      </div>
      <!-- 239.61 ${height-229.89}max-height:750px; min-height:530px;-->
      <div class="" :style="` margin:10px 15px 59px 15px ;height:${height-229.89}px;
          overflow-y: scroll; `">
        <van-pull-refresh v-model="refreshLoading" @refresh="gdonRefresh">
          <van-list v-model="listLoading" :finished="dataFinished" finished-text="没有更多了" :offset="1" @load="gdonLoad"
            ref="list" :immediate-check="false">
            <div class="" v-if="gdGetCountList && gdactive==0">
              <div class="flex-space " style=" display: flex;flex-wrap: wrap;">
                <div class="bg-f " style="width: 165px; ;padding: 15px 0px ;margin:0px 15px 15px 0px;"
                  @click="gdselectboss(1)">
                  <div class="flex-c" style="margin: 0px 0px 30px;">
                    <img style="margin: auto;width: 44px;height: 44px;" src="../../assets/newsetting1/outtime.png">
                  </div>
                  <div class="flex-c" style="margin-bottom: 10px;">
                    {{gdGetCountList.timeoutsCount}}
                  </div>
                  <div class="flex-c" style=" ">
                    已超时
                  </div>
                </div>
                <div class="bg-f " style="width: 165px; ;padding: 15px 0px ;  margin: 0px 0px 15px 0px;"
                  @click="gdselectboss(2)">
                  <div class="flex-c" style="margin: 0px 0px 30px;">
                    <img style="margin: auto;width: 44px;height: 44px;" src="../../assets/newsetting1/noshoul.png">
                  </div>
                  <div class="flex-c" style="margin-bottom: 10px;">
                    {{gdGetCountList.notAccepted}}
                  </div>
                  <div class="flex-c" style=" ">
                    未受理
                  </div>
                </div>
                <div class="bg-f " style="width: 165px; ;padding: 15px 0px ;margin:0px 15px 15px 0px;"
                  @click="gdselectboss(3)">
                  <div class="flex-c" style="margin: 0px 0px 30px;">
                    <img style="margin: auto;width: 44px;height: 44px;" src="../../assets/newsetting1/yessouli.png">
                  </div>
                  <div class="flex-c" style="margin-bottom: 10px;">
                    {{gdGetCountList.accepted}}
                  </div>
                  <div class="flex-c" style="">
                    已受理
                  </div>
                </div>
                <div class="bg-f " style="width: 165px; ;padding: 15px 0px ; margin: 0px 0px 15px 0px;"
                  @click="gdselectboss(4)">
                  <div class="flex-c" style="margin: 0px 0px 30px;">
                    <img style="margin: auto;width: 44px;height: 44px;" src="../../assets/newsetting1/yes.png">
                  </div>
                  <div class="flex-c" style="margin-bottom: 10px;">
                    {{gdGetCountList.completed}}
                  </div>
                  <div class="flex-c" style=" ">
                    已完成
                  </div>
                </div>
              </div>
            </div>
            <!-- 已超时 已完成 -->
            <div class="" v-if="gdGetListByPageList&&(gdactive==1 || gdactive==4)">
              <div class="bg-f" style="margin-bottom: 15px;padding: 15px;" v-for="(item1,index1) in gdGetListByPageList"
                :key="index1">
                <div class="flex-space " style=" ">
                  <div class="flex-c">
                    <div class="" style="margin-right: 10px ;">
                      <img :src="item1.imgUrl" style="width: 25px;height: 25px;">
                    </div>
                    <!-- 设备名称 -->
                    <div class=""
                      style="font-size: 16px;font-family:auto;font-weight: bold;color: #000000;box-sizing: border-box;overflow: hidden;">
                      {{item1.terminalName}}
                    </div>
                  </div>
                  <div class="flex-c">
                    <div class="flex-c" @click="gddetail(item1)"
                      style="width: 44px;height: 20px;border: 1px solid #0580FF;border-radius: 5px;font-size: 12px;font-family: auto;font-weight: 500;color: #0580FF;margin-left: 20px;">
                      详情
                    </div>
                  </div>
                  <!-- //时间 -->
                </div>
                <!-- 分割线 -->
                <div class="" style="height: 1px;width: 100%; background: #F6F7FB; margin-top: 15px;">
                </div>
                <div class="flex-space" style="padding: 15px  0px 0px;">
                  <div class="" style="font-size: 14px;font-family: auto;font-weight: 500;color: #666666;">
                    状态:
                  </div>
                  <div class="" style="font-size: 14px;font-family:auto;font-weight: bold;color: #FA3131;">
                    {{item1.workTitle}}
                  </div>
                </div>
                <div class="" style="height: 1px;width: 100%; background: #F6F7FB; margin-top: 15px;">
                </div>
                <div class="flex-space" style="padding: 14px  0px 0px;" v-if="gdGetListByPageList&&gdactive==1">
                  <div class="" style="font-size: 14px;font-family: auto;font-weight: 500;color: #666666;">
                    故障时间:
                  </div>
                  <div class="" style="font-size: 14px;font-family:auto;font-weight: bold;color: #FA3131;"
                    ref="errortime1">
                    {{item1.createTime}}
                    <!-- {{computetime(index)}} -->
                  </div>
                </div>
                <div class="flex-space" style="padding: 14px  0px 0px;" v-if="gdGetListByPageList&&gdactive==1">
                  <div class="" style="font-size: 14px;font-family: auto;font-weight: 500;color: #666666;">
                    故障时长:
                  </div>
                  <div class="" style="font-size: 14px;font-family:auto;font-weight: bold;color: #FA3131;" ref="spans1">
                    <!--  {{item.showDate}} -->
                    {{computetime1(index1)}}
                  </div>
                </div>
                <div class="flex-space" style="padding: 14px  0px 0px;" v-if="gdGetListByPageList&&gdactive==4">
                  <div class="" style="font-size: 14px;font-family: auto;font-weight: 500;color: #666666;">
                    受理耗时:
                  </div>
                  <div class="" style="font-size: 14px;font-family:auto;font-weight: bold;color: #FA3131;">
                    {{item1.showDate}}
                  </div>
                </div>
              </div>
            </div>
            <!-- 未受理 -->
            <div class="" v-if="gdGetListByPageList&&gdactive==2">
              <div class="bg-f" style="margin-bottom: 15px;padding: 15px;" v-for="(item,index) in gdGetListByPageList"
                :key="index">
                <div class="flex-space " style=" ">
                  <div class="flex-c">
                    <div class="" style="margin-right: 10px ;">
                      <img :src="item.imgUrl" style="width: 25px;height: 25px;">
                    </div>
                    <!-- 设备名称 -->
                    <div class=""
                      style="font-size: 16px;font-family:auto;font-weight: bold;color: #000000;box-sizing: border-box;overflow: hidden;">
                      {{item.terminalName}}
                    </div>
                  </div>
                  <div class="flex-c">
                    <div class="flex-c" @click="gdshouli(item.workId,'受理')"
                      style="width: 44px;height: 20px;border: 1px solid #0580FF;border-radius: 5px;font-size: 12px;font-family: auto;font-weight: 500;color: #0580FF;margin-left: 20px;">
                      受理
                    </div>
                    <div class="flex-c" @click="gddetail(item)"
                      style="width: 44px;height: 20px;border: 1px solid #0580FF;border-radius: 5px;font-size: 12px;font-family: auto;font-weight: 500;color: #0580FF;margin-left: 20px;">
                      详情
                    </div>
                  </div>
                  <!-- //时间 -->
                </div>
                <!-- 分割线 -->
                <div class="" style="height: 1px;width: 100%; background: #F6F7FB; margin-top: 15px;">
                </div>
                <div class="flex-space" style="padding: 15px  0px 0px;">
                  <div class="" style="font-size: 14px;font-family: auto;font-weight: 500;color: #666666;">
                    状态:
                  </div>
                  <div class="" style="font-size: 14px;font-family:auto;font-weight: bold;color: #FA3131;">
                    {{item.workTitle}}
                  </div>
                </div>
                <div class="" style="height: 1px;width: 100%; background: #F6F7FB; margin-top: 15px;">
                </div>
                <div class="flex-space" style="padding: 14px  0px 0px;">
                  <div class="" style="font-size: 14px;font-family: auto;font-weight: 500;color: #666666;">
                    故障时间:
                  </div>
                  <!-- 11111111111111111111111111111111 -->
                  <div class="" style="font-size: 14px;font-family:auto;font-weight: bold;color: #FA3131;"
                    ref="errortime2">
                    <!-- {{item.showDate}} 故障时长-->
                    <!-- 故障创建时间 -->
                    {{item.createTime}}
                  </div>
                </div>
                <div class="" style="height: 1px;width: 100%; background: #F6F7FB; margin-top: 15px;">
                </div>
                <div class="flex-space" style="padding: 14px  0px 0px;">
                  <div class="" style="font-size: 14px;font-family: auto;font-weight: 500;color: #666666;">
                    故障时长:
                  </div>
                  <div class="" style="font-size: 14px;font-family:auto;font-weight: bold;color: #FA3131;" ref="spans2">
                    {{computetime2(index)}}
                  </div>
                </div>
              </div>
            </div>
            <!-- 已受理 -->
            <div class="" v-if="gdGetListByPageList&&gdactive==3">
              <div class="bg-f" style="margin-bottom: 15px;padding: 15px;" v-for="(item,index) in gdGetListByPageList"
                :key="index">
                <div class="flex-space " style=" ">
                  <div class="flex-c">
                    <div class="" style="margin-right: 10px ;">
                      <img :src="item.imgUrl" style="width: 25px;height: 25px;">
                    </div>
                    <!-- 设备名称 -->
                    <div class=""
                      style="font-size: 16px;font-family:auto;font-weight: bold;color: #000000;box-sizing: border-box;overflow: hidden;">
                      {{item.terminalName}}
                    </div>
                  </div>
                  <div class="flex-c">
                    <div class="">
                      <!-- <div id="" v-if="item.workId == goworkId">
                      </div> -->
                      <!-- v-else -->
                      <div class="flex-c" @click="gdshouli(item.workId,'去处理')"
                        style="width: 44px;height: 20px;border: 1px solid #0580FF;border-radius: 5px;font-size: 12px;font-family: auto;font-weight: 500;color: #0580FF;margin-left: 20px;">
                        去处理
                      </div>
                    </div>
                    <div class="flex-c" @click="gdshouli(item.workId,'完成')"
                      style="width: 44px;height: 20px;border: 1px solid #0580FF;border-radius: 5px;font-size: 12px;font-family: auto;font-weight: 500;color: #0580FF;margin-left: 20px;">
                      完成
                    </div>
                    <div class="flex-c" @click.stop="gddetail(item)"
                      style="width: 44px;height: 20px;border: 1px solid #0580FF;border-radius: 5px;font-size: 12px;font-family: auto;font-weight: 500;color: #0580FF;margin-left: 20px;">
                      详情
                    </div>
                  </div>
                  <!-- //时间 -->
                </div>
                <!-- 分割线 -->
                <div class="" style="height: 1px;width: 100%; background: #F6F7FB; margin-top: 15px;">
                </div>
                <div class="flex-space" style="padding: 15px  0px 0px;">
                  <div class="" style="font-size: 14px;font-family: auto;font-weight: 500;color: #666666;">
                    状态:
                  </div>
                  <div class="" style="font-size: 14px;font-family:auto;font-weight: bold;color: #FA3131;">
                    {{item.workTitle}}
                  </div>
                </div>
                <div class="" style="height: 1px;width: 100%; background: #F6F7FB; margin-top: 15px;">
                </div>
                <div class="flex-space" style="padding: 14px  0px 0px;">
                  <div class="" style="font-size: 14px;font-family: auto;font-weight: 500;color: #666666;">
                    受理时间:
                  </div>
                  <div class="" style="font-size: 14px;font-family:auto;font-weight: bold;color: #FA3131;">
                    {{item.createTime}}
                  </div>
                </div>



              </div>
            </div>
            <div class="flex-c" style="width: 100%;text-align: center;">
              <img v-if="gdGetListByPageList.length==0&&gdboolenimg" src="../../assets/noList/nolist.png"
                style=" width: 50%;">
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
    <!-- 弹窗 -->
    <van-popup v-model="show" round>
      <div class="" style=" width: 300px;height: 280px; ">
        <div class="popup_tuik"
          style="font-size: 16px; padding: 18px 132px;text-align: center;font-weight: bold;font-family: auto;color: #FFFFFF;">
          退款
        </div>
        <div id="" style="font-size: 19px;font-weight: bolder; font-family: auto;margin: 30px 0px;text-align: center;">
          是否{{gdchange}}此工单
        </div>
        <div class="flex-c" style="margin: 20px 0px 8px;" @click="gdopenpopup">
          <div class="" style="width: 250px;height: 34px;padding: 9px 107px;font-size: 16px;color: #0580FF;font-weight: 500;font-family: auto;
border: 1px solid #0580FF;border-radius: 5px; ">
            取消
          </div>
        </div>
        <div class="flex-c" style="margin: 20px 0px 8px;" @click="gdochange">
          <div class="flex-c"
            style="width: 250px;height: 34px; font-size: 16px;color: #FFFFFF;font-weight: 500;font-family: auto;background: #0580FF;border-radius: 5px; ">
            {{gdchange}}
          </div>
        </div>
        <div class="flex-c" style="margin-bottom:20px;" @click="gdclosepopup">
          <div class=""
            style="width: 250px;height: 34px;padding: 9px 107px;font-size: 16px;color: #BBBBBB;font-weight: 500;font-family: auto; border-radius: 5px; ">
            忽略
          </div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
  var jweixin = require('jweixin-module')
  import {
    Dialog,
    Toast,
    Loading
  } from 'vant';
  import {
    TerminalStatus
  } from '@/api/setting/TerminalStatus.js'
  import sbbindoperations from './bindoperations/bindoperations.vue'
  import {
    GetCount
  } from '@/api/setting/GetCount.js'
  // 工单管理的离线 卡纸  缺纸 缺墨
  import {
    GetListByPage
  } from '@/api/setting/GetListByPage.js'
  // 受理
  import {
    Accept
  } from '@/api/setting/Accept.js'
  // 忽略
  import {
    Ignore
  } from '@/api/setting/Ignore.js'
  // 完成
  import {
    Complete
  } from '@/api/setting/Complete.js'
  // 去处理
  import {
    Start
  } from '@/api/setting/Start.js'
  import {
    getCurrTime
  } from '@/utils/time.js'
  export default {
    components: {
      sbbindoperations
    },
    data() {
      return {
        show: false,
        sbbindoperationBolen: false,
        sbshow: false,
        activeselect: 0, //默认设备状态
        active: 0, //默认设备状态的第一个全部
        text: '', //设备状态的搜索vmodel
        sbpageindex: 1, //设备状态的页数
        sbpagesize: 10, //设备状态每一页查询的数量
        height: 750, //设备的页面高度
        sbname: '', //设备的列表value
        sbLoading: false, //设备的下拉刷新双向绑定
        sbTerminalStatuslist: [], //设备的显示内容
        sbhcoutboole: true, //展开
        sbloading: false, //上拉加载
        sbfinished: false, //加载完成上拉
        sbpullLoading: false, //下拉刷新
        sbTerminalStatusbolen: false, //控制不加他请求数据的时间界面会显示暂无数据的图片(暂无数据的显示)
        tablist: [{
          name: '全部',
          value: ''
        }, {
          name: '离线',
          value: '0'
        }, {
          name: '卡纸',
          value: '7'
        }, {
          name: '缺纸',
          value: '9'
        }, {
          name: '缺墨',
          value: '8'
        }],
        // 工单管理的所有导航
        gdList: [{
            name: '全部',
            value: ''
          },
          {
            name: '已超时',
            value: '-1'
          },
          {
            name: '未受理',
            value: '1'
          },
          {
            name: '已受理',
            value: '2'
          },
          {
            name: '已完成',
            value: '4'
          }
        ],
        update: [{
            name: '修改费率',
            id: '1',
            color: '#05A6ED'
          },
          // {
          // 	name: '模板上传',
          // 	id: '2'
          // },
          {
            name: '修改地址',
            id: '3',
            color: '#FEC963'
          },
          // {
          //   name: '年费充值',
          //   id: '4'
          // },
        ],
        // -----------------------------------------------------------
        gdactive: 0,
        refreshLoading: false,
        listLoading: false,
        dataFinished: false,
        gdGetCountList: {}, //工单全部的数据
        gdGetListByPageList: [], //工单管理除了全部的数据
        gdchange: '', //完成 受理 参数
        goworkId: '', //弹窗受理 去完成的参数
        gddatacount: '', //总数
        gdonloadboolen: true,
        gdboolenimg: false,
        listQuery: {
          pageindex: 1,
          pagesize: 10,
          postdata: [{
            field: "queryType",
            value: ""
          }]
        }
      }
    },
    beforeCreate() {},
    created() {
      // console.log('create')
      if (this.$route.query.setting) { //说明是子界面返回的 不需要重新加载数据
        var localActive = window.localStorage.getItem('sbactive')
        // console.log(localActive, 'localActive')
        this.active = localActive;
        // console.log(this.active, 'this.activewejfdiowefjo')
        this.sbActive({
          name: '全部',
          value: ''
        }, this.active);
      }
      // 设备状态
      if (this.activeselect == 0) {
        this.sbActive({
          name: '全部',
          value: '',
        }, 0);
      }
    },
    mounted() {
      this.client() //获取高度
      // console.log('???')
      // console.log(this.$refs)
      // console.log(this.$refs.list.load(),  ' this.$refs.list.load();')
    },
    computed: {
      cache: false,
      computetime() {
        return (index) => {
          setInterval(() => {
            var errorinnerhtml = this.$refs.errortime[index].innerHTML;
            console.log(errorinnerhtml, 'errorinnerhtml')
            if (errorinnerhtml != '') {
              this.$refs.spans[index].innerHTML = getCurrTime(errorinnerhtml);
            } else {
              this.$refs.spans[index].innerHTML = '暂无数据';
            }
          }, 1000)
        }
      },
      computetime2() {
        return (index) => {
          setInterval(() => {
            var errorinnerhtml2 = this.$refs.errortime2[index].innerHTML;
            console.log(errorinnerhtml2, 'errorinnerhtml2222222222222222222')
            if (errorinnerhtml2 != '') {
              this.$refs.spans2[index].innerHTML = getCurrTime(errorinnerhtml2);
            } else {
              this.$refs.spans2[index].innerHTML = '暂无数据';
            }
          }, 1000)
        }
      },
      computetime1() {
        return (index) => {
          setInterval(() => {
            var errorinnerhtml1 = this.$refs.errortime1[index].innerHTML;
            console.log(this.$refs, 'errorinnerhtml1111111111111111')
            if (errorinnerhtml1 != '') {
              this.$refs.spans1[index].innerHTML = getCurrTime(errorinnerhtml1);
            } else {
              this.$refs.spans1[index].innerHTML = '暂无数据';
            }
          }, 1000)
        }
      }
    },
    methods: {

      // 点击工单管理的二级导航
      gdActive(index, item) {
        this.gdboolenimg = false;
        this.dataFinished = false;
        this.gdactive = index;
        // this.dataFinished = false;
        // this.listLoading = false;
        // this.refreshLoading = false;
        this.gdGetListByPageList = [];
        // 工单所有数据
        if (index == 0) {
          this.gdGetCountList = {};
          this.dataFinished = true;
          // console.log(this.gdGetCountList, ' this.gdGetCountList清空')
          this.gdGetCount()
        } else {
          this.listQuery.pageindex = 1
          this.listQuery.postdata[0].value = item.value
          this.gdGetListByPageList = [];
          // console.log(this.gdGetListByPageList, ' this.gdGetListByPageList清空')
          this.GetListByPagegd()
        }
      },
      // 工单管理的全部数据
      gdGetCount(gdcount) {
        GetCount().then(res => {
          if (res.success) {
            if (gdcount == 0) {
              this.refreshLoading = false;
            }
            this.gdGetCountList = res.data;
          }
        })
      },
      // 工单的下拉刷新
      async gdonRefresh() {
        // 开始下拉刷新
        this.dataFinished = false,
          this.refreshLoading = true;
        this.gdboolenimg = false;
        this.gdGetCountList = {};
        this.gdGetListByPageList = [];
        if (this.gdactive == 0) { //全部的数据
          this.dataFinished = true,
            await this.gdGetCount(0);
        } else {
          this.listQuery.pageindex = 1
          await this.GetListByPagegd();
        }
        this.refreshLoading = false
      },
      //工单的上拉加载
      async gdonLoad() {
        // console.log('工单的下拉刷新');
        // if (this.gdonloadboolen) {
        // this.gdonloadboolen = false;
        // this.listLoading = true;
        console.log('上拉加载');
        this.listQuery.pageindex++;
        await this.GetListByPagegd()
        // this.gdonloadboolen = true
        // .then(res => {
        //   if (res.datacount == 0) {
        //     this.dataFinished = true;
        //   }
        //   this.listLoading = false;
        //   this.gddatacount = res.datacount;
        //   this.gdGetListByPageList.push(...res.data);
        //   this.gdonloadboolen = true;
        //   this.dataFinished = this.gddatacount <= this.gdGetListByPageList.length;
        //   // console.log(this.gddatacount, 'gddatacount');
        //   // console.log(this.gdGetListByPageList.length, 'gdGetListByPageList');
        // })
        // }
      },
      // 点击全部写的4个状态跳转到相对应的顶部导航栏
      gdselectboss(index) {
        this.listQuery.pageindex = 1
        this.listQuery.postdata[0].value = this.gdList[index].value;
        this.gdactive = index;
        this.dataFinished = false;
        this.gdGetCountList = {};
        this.gdGetListByPageList = [];
        this.gdboolenimg = false;
        this.GetListByPagegd()
      },
      // 工单管理的二级导航下的数据 除了全部的
      GetListByPagegd(gdpaged) {
        return new Promise((resolve, reject) => {
          console.log(this.listQuery.pageindex)
          this.listLoading = true
          if (this.listQuery.pageindex === 1)
            this.gdGetListByPageList = []
          GetListByPage(this.listQuery).then(res => {
            this.listLoading = false
            let list = res.data || []
            this.gdGetListByPageList = this.gdGetListByPageList.concat(list)
            this.gdboolenimg = res.datacount === 0
            this.dataFinished = this.listQuery.pageindex >= res.pagecount
            // 刷新的状态
            // if (gdpaged == 0) { //下拉刷新的参数
            //   this.refreshLoading = false;
            //   // this.gdGetListByPageList = res.data;
            // } else if (gdpaged == 1) {
            //   resolve(res);
            // } else {
            //   // this.gdGetListByPageList = res.data;
            // }
            resolve()
          }).catch(() => {
            this.listLoading = false
            resolve()
          })
        })

      },
      // 跳转到详情页面
      gddetail(item) {
        this.$router.push({
          path: '/gddetails',
          query: {
            workId: item.workId
          }
        })
      },
      // 未受理的受理弹窗
      gdshouli(item, value) {
        console.log(item, 'item')
        console.log(value, 'value')
        this.goworkId = item,
          this.gdchange = value;
        this.show = true;
      },
      // 取消弹窗
      gdopenpopup() {
        this.show = false
      },

      // 忽略
      gdclosepopup() {
        Ignore({
          postdata: this.goworkId
        }).then(res => {
          this.popup = false;
          this.show = false;
          console.log(res, '点击了忽略')
          Toast(res.message);
          this.GetListByPagegd(); //重新调用获取数据
        })
      },
      // 完成  受理 去处理
      gdochange() {
        console.log(this.gdchange, 'gdchange')
        if (this.gdchange == '受理') {
          Accept({
            postdata: this.goworkId
          }).then(res => {
            this.show = false;
            this.popup = false;
            console.log(res, '受理')
            Toast(res.message);
            this.GetListByPagegd(); //重新调用获取数据
          })
        }
        if (this.gdchange == '去处理') {
          Start({
            postdata: this.goworkId
          }).then(res => {
            this.show = false;
            this.popup = false;

            console.log(res, '去处理')
            Toast(res.message);
            this.GetListByPagegd(); //重新调用获取数据
          })
        }
        if (this.gdchange == '完成') {
          Complete({
            postdata: this.goworkId
          }).then(res => {
            this.show = false;
            this.popup = false;
            console.log(res, '完成')
            Toast(res.message);
            this.GetListByPagegd(); //重新调用获取数据
          })
        }

      },

      // 设备所有区域
      // =================================================================
      // 上拉加载设备
      onLoad() {
        console.log('下拉加载')
        this.sbloading = true;
        this.sbActive(this.sbname, this.active, 'sbonLoads')
      },
      select(index) {
        this.activeselect = index;
        if (index == 1) {
          this.gdGetCount()
        }
      },
      // 设备的二级导航切换  sbon参数判断下拉的不直接赋值而是追加
      sbActive(name, num, sbonLoad) {
        this.sbTerminalStatusbolen = false;

        if (sbonLoad == 'sbonLoads') {
          this.sbpageindex += 1;
        } else {
          // 点击切换的时候页数置为1
          this.sbpageindex = 1;
        }
        this.sbname = name;
        this.active = num; //控制class
        if (sbonLoad == undefined) {
          this.text = '';
          console.log('清空数组')
          this.sbTerminalStatuslist = [];
        }
        TerminalStatus({
          "pageindex": this.sbpageindex,
          "pagesize": 10,
          "postdata": [{
              "field": "printState", //设备的状态
              "value": name.value
            },
            {
              "field": "terminalName",
              "value": this.text
            }
          ]
        }).then(res => {
          this.sbpullLoading = false; //下拉刷新结束
          if (res.data) {
            // 设备的上拉加载
            if (sbonLoad == 'sbonLoads') {
              this.sbloading = false;
              this.sbTerminalStatuslist.push(...res.data)
              if (this.sbTerminalStatuslist.length >= res.datacount) {
                this.sbfinished = true
              }
            } else {
              if (this.sbTerminalStatuslist.length >= res.datacount) {
                this.sbfinished = true
              } 
              this.sbTerminalStatuslist = res.data;
            }
          }
          if (!res.success) {
            this.sbTerminalStatusbolen = true; //返回的数据为空 界面显示暂无数据的图片
          }
          console.log(res, '获取全部')
        }).catch(error => {
          this.sbpullLoading = false; //下拉刷新结束
        })

      },
      // 设备的下拉刷新
      onRefresh() {
        this.sbpullLoading = true;
        this.sbActive(this.sbname, this.active)
      },
      // 绑定运维
      sbBindingOperations(item) {
        window.localStorage.setItem('sbactive', this.active)
        this.$router.push({
          path: '/bindoperations',
          query: {
            TerminalId: item.terminalId
          }
        })
      },
      // 控制耗材余量的折叠展开
      sbhcout() {
        this.sbhcoutboole = !this.sbhcoutboole;
      },
      // 设备获取高度
      client() {
        this.$nextTick(() => {
          this.height = document.body.clientHeight;
        });
      },
      // 设备的搜索
      tabtoplist() {
        this.sbActive(this.sbname, this.active, 'tabtoplist')
      },
      onBridgeReady() {
        // jweixin.ready(function() {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId": "wx2421b1c4370ec43b", //公众号ID，由商户传入
            "timeStamp": "1395712654", //时间戳，自1970年以来的秒数
            "nonceStr": "e61463f8efa94090b1f366cccfbbb444", //随机串
            "package": "prepay_id=u802345jgfjsdfgsdg888",
            "signType": "MD5", //微信签名方式：
            "paySign": "70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名
          },
          function(res) {
            if (res.err_msg == "get_brand_wcpay_request:ok") {
              alert('支付成功')
              // 使用以上方式判断前端返回,微信团队郑重提示：
              //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
            } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
              alert("用户取消支付!");
            } else {
              alert("支付失败!");
            }
          });
        // });

      },
      // 修改费率 修改地址  年费充值
      updataselect(item, id) {
        switch (id) {
          // 修改费率
          case '1':
            this.$router.push({
              path: '/modifyRate',
              query: {
                terminalId: item.terminalId
              }
            })
            break;
            // case '2':
            // 	this.$router.push({
            // 		path: '/modifyRate',
            // 		query: {
            // 			terminalId: item.terminalId
            // 		}
            // 	})
            // 	break;
            // // 修改地址
          case '3':
            this.$router.push({
              path: '/address',
              query: {
                terminalId: item.terminalId
              }
            })
            break;
          case '4':
            this.onBridgeReady();
            // this.$router.push({
            //   path: '/monyin',
            //   query: {
            //     terminalId: item.terminalId
            //   }
            // })
            break;
        }
      }
    }
  }
</script>
<style scoped>
  .popup_tuik {
    background: url(../../assets/newrefund/bg@2x.png) no-repeat;
    background-size: 100%;
  }

  .bg-f {
    border-radius: 5px;
    background-color: #FFFFFF;
  }

  .setting .activeclass {
    /* background-color: #02A7F0;
			color: #ffffff */
    color: #000000;
  }

  .setting .noactiveclass {
    color: #BBBBBB;
    /* color: #000000;
			background-color: #D7D7D7; */
  }

  .setting .activeselect {
    height: 43px;
    color: #FFFFFF;
    width: 55px;
    text-align: center;
    background: url(../../assets/newsetting/bg@2x.png) no-repeat;
    background-size: 100%;
  }

  .setting .activeno {
    color: #000000;
    height: 38px;
    text-align: center;
    width: 55px;
    background: url(../../assets/newsetting/bg2@2x.png) no-repeat;
    background-size: 100%;
  }

  .setting .gdqb div:nth-child(even) {
    margin-right: 0px;
  }
</style>
